<div class="row row-flex">
  <div class="col-xs-12 col-sm-6 col-md-7">
    <h2>Community Boxes</h2>
    <p>These boxes are lovingly crafted by members of the Truffle community.</p>

    <h2 class="hidden-xs">Creating Your Own</h2>
    <p class="hidden-xs">Anyone can create a truffle box! To get started check out <a href="/docs/advanced/truffle-boxes">our documentation</a> and unbox <a href="/boxes/blueprint">the blueprint Truffle Box</a> to have all you need to get started. All boxes undergo a screening process to ensure compatibility with Truffle. To start the pre-screening process, <a href="mailto:info@trufflesuite.com">send us an email</a> with your desired box name and brief description, along with a link to its GitHub repo to: <a href="mailto:info@trufflesuite.com">info@trufflesuite.com</a>.</p>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-4 col-md-push-1">
    <section class="FeatureCard" id="BoxBlueprint">
      <a href="/boxes/blueprint">
        <div class="FeatureBody withImage">
          <img class="FeatureImage" src="https://github.com/truffle-box/blueprint-box/blob/master/box-img-sm.png?raw=true" alt="webpack-box" onerror="javascript:this.src='/images/ballotin/loading-banner.png'" />
        </div>
      </a>

      <footer class="BoxRundown">
        <a href="/boxes/blueprint"><h3>blueprint<small class="GitHubStars"><a class="github-button" href="https://github.com/truffle-box/blueprint-box" data-icon="octicon-star" data-show-count="true" aria-label="Star truffle-box/blueprint-box on GitHub">Star</a></small></h3></a>

        <p>All you need to get started making your own Truffle Box!</p>

        <ul class="BoxTagsList">
          <li>
            <a href="#">template</a>
          </li>
          <li>
            <a href="#">official</a>
          </li>
        </ul>
      </footer>
    </section>
  </div>

  <div class="col-xs-12 visible-xs">
    <h2>Create Your Own!</h2>
    <p>Anyone can create a truffle box! To get started check out <a href="/docs/advanced/truffle-boxes">our documentation</a> and unbox <a href="/boxes/blueprint">the blueprint Truffle Box</a> to have all you need to get started. All boxes undergo a screening process to ensure compatibility with Truffle. To start the pre-screening process, <a href="mailto:info@trufflesuite.com">send us an email</a> with your desired box name and brief description, along with a link to its GitHub repo to: <a href="mailto:info@trufflesuite.com">info@trufflesuite.com</a>.</p>
  </div>
</div>
